import React, {Component} from 'react';
import {Platform, StyleSheet, Text, TouchableOpacity, View,} from 'react-native';
import PropTypes from 'prop-types';
import Icon from 'react-native-vector-icons/Ionicons';

const APPBAR_HEIGHT = Platform.select({
    ios: 44,
    android: 56,
    default: 64,
});
const STATUSBAR_HEIGHT = Platform.select({
    ios: 20,
    default: 0,
});
const TITLE_OFFSET_CENTER_ALIGN = Platform.select({
    ios: 70,
    default: 56,
});
const TITLE_OFFSET_LEFT_ALIGN = Platform.select({
    ios: 20,
    android: 56,
    default: 64,
});
const getAppBarHeight = isLandscape => {
    if (Platform.OS === 'ios') {
        if (isLandscape && !Platform.isPad) {
            return 32;
        } else {
            return 44;
        }
    } else if (Platform.OS === 'android') {
        return 56;
    } else {
        console.log('xxx');
        return 64;
    }
};
const styles = StyleSheet.create({
    headerButton: {
        alignItems: 'center',
        padding: 7,
    },

    headerWrapper: {
        flexDirection: 'row',
        backgroundColor: '#FF6347',
        // position: 'absolute',
        zIndex: 999,
        width: '100%',
        height: getAppBarHeight(),
    },

    headerTitleWrapper: {
        flex: 1,
        height: getAppBarHeight(),
        lineHeight: getAppBarHeight(),
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'hidden',
        // textOverflow: 'ellipsis',
        // whiteSpace: 'nowrap',
    },
    headerTitle: {
        color: '#f0f0f0',
        // backgroundColor: '#98bf21',
        fontWeight: 'bold',
        fontSize: 18,
    },

    headerLeftWrapper: {
        width: 40,
        height: getAppBarHeight(),
        lineHeight: getAppBarHeight(),
        alignItems: 'center',
        justifyContent: 'center',
        // backgroundColor: 'blue',
    },
    headerRightWrapper: {
        width: 40,
        height: getAppBarHeight(),
        lineHeight: getAppBarHeight(),
        alignItems: 'center',
        justifyContent: 'center',
        // backgroundColor: 'blue'
    },
});

class Header extends Component {
    static propTypes = {
        // Header整体样式
        headerStyle: PropTypes.object,
        // Header标题样式
        headerTitleStyle: PropTypes.object,
        // Header标题文字
        headerTitle: PropTypes.string,
        // Header左边部分，一般是返回按钮
        headerLeft: PropTypes.object,
        // Header左边部分被点击
        headerLeftOnPress: PropTypes.func,
        // Header右边部分
        headerRight: PropTypes.object,
        // Header右边部分被点击
        headerRightOnPress: PropTypes.func,
    };
    static defaultProps = {
        headerStyle: {},
        headerTitleStyle: {},
        headerTitle: '这个是你想要的标题吗',
        headerLeft: <Icon name={'ios-arrow-back'} size={24} color={'#f0f0f0'}/>,
        headerLeftOnPress: () => {
        },
        headerRight: <Icon name={'ios-search'} size={24} color={'#f0f0f0'}/>,
        headerRightOnPress: () => {
        },
    };

    constructor(props) {
        super(props);
        this.state = {
            visible: true,
        };
    }

    render() {
        if (this.state.visible) {
            return (
                <View style={[styles.headerWrapper, this.props.headerStyle]}>
                    {this.renderHeaderLeft()}
                    {this.renderHeaderTitle()}
                    {this.renderHeaderRight()}
                </View>
            );
        }
        return null;
    }

    renderHeaderLeft = () => {
        return (
            <View style={[styles.headerLeftWrapper]}>
                <TouchableOpacity
                    activeOpacity={0.7}
                    style={styles.headerButton}
                    onPress={() => {
                        this.props.headerLeftOnPress();
                    }}
                >
                    {this.props.headerLeft}
                </TouchableOpacity>
            </View>
        );
    };

    renderHeaderRight = () => {
        return (
            <View style={[styles.headerRightWrapper]}>
                <TouchableOpacity
                    activeOpacity={0.7}
                    style={styles.headerButton}
                    onPress={() => {
                        this.props.headerRightOnPress();
                    }}
                >
                    {this.props.headerRight}
                </TouchableOpacity>
            </View>
        );
    };

    renderHeaderTitle = () => {
        return (
            <View style={[styles.headerTitleWrapper]}>
                <Text style={[styles.headerTitle, this.props.headerTitleStyle]} numberOfLines={1}>
                    {this.props.headerTitle}
                </Text>
            </View>
        );
    };

    show = () => {
        this.setState({visible: true});
    };

    hide = () => {
        this.setState({visible: false});
    };
}

export default Header;